<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: rgb(255,248,220);
        padding: 4px 6px;
        font-size: 16px;
    }

    fieldset {
        padding: 8px;
        border: 0;
        width: 700px;
    }
    
    code {
        background-color: #f5f5f5;
        padding: 2px 4px;
        border-radius: 3px;
        font-family: monospace;
    }
    
    .highlight {
        background-color: #fffacd;
        padding: 10px;
        border-radius: 5px;
        margin: 10px 0;
    }

</style>
<title>Word Discoverer: R2 Synchronization Info</title>
</head>
<body>

<fieldset>
<h3>Advantages of Synchronization</h3>
<ul>
  <li>Automatic vocabulary backup to Cloudflare R2, so you don't have to worry about manual backups any more</li>
  <li>Vocabulary synchronization between different Word Discoverer extensions (if you use this extension in multiple browsers)</li>
  <li>Better performance and reliability compared to Google Drive sync</li>
  <li>Full control over your data with your own R2 bucket</li>
</ul>


<h3>Description</h3>

<p>
If you enable Cloudflare R2 synchronization, your vocabulary will be automatically backed up to your R2 bucket each time you add or remove words from it. Maximum sync frequency is once per 30 minutes, although you can always press "Sync now" button to force manual synchronization.
<br>
<br>
If you use Word Discoverer extension in multiple browsers, their vocabularies will be synchronized through your R2 bucket.
<br>
<br>
Word Discoverer files will be saved to the "Words_Discoverer_Sync" folder in your R2 bucket. Your vocabulary can be found in "user_vocabulary.txt" file. Backup files are automatically created with timestamps.
<br>
<br>
To stop synchronization press the "Stop Sync" button which will appear once synchronization is enabled.
<br>
<br>
If extension icon shows red "err" badge, it means that synchronization has stopped due to an error. In this case you can try to press "Synchronize Now" button again or check your R2 configuration.
</p>

<h3>Setup Instructions</h3>

<div class="highlight">
<strong>Before you can use R2 sync, you need to set up a Cloudflare Worker and R2 bucket.</strong>
</div>

<h4>Step 1: Create R2 Bucket</h4>
<ol>
  <li>Go to <a href="https://dash.cloudflare.com" target="_blank">Cloudflare Dashboard</a></li>
  <li>Navigate to R2 Object Storage</li>
  <li>Create a new bucket (e.g., "words-discoverer-sync")</li>
</ol>

<h4>Step 2: Deploy Cloudflare Worker</h4>
<ol>
  <li>Go to Workers & Pages in your Cloudflare Dashboard</li>
  <li>Create a new Worker</li>
  <li>Copy the worker code from <code>cloudflare-r2-worker.js</code> (included with this extension)</li>
  <li>Configure environment variables:
    <ul>
      <li><code>API_TOKEN</code>: Generate a secure random token (like a UUID)</li>
    </ul>
  </li>
  <li>Add R2 bucket binding:
    <ul>
      <li>Variable name: <code>R2_BUCKET</code></li>
      <li>Bucket name: Your bucket name from Step 1</li>
    </ul>
  </li>
  <li>Deploy the Worker</li>
</ol>

<h4>Step 3: Configure Extension</h4>
<ol>
  <li>In the extension settings, find the "R2 Configuration" section</li>
  <li>Enter your Worker URL (e.g., <code>https://your-worker.your-subdomain.workers.dev</code>)</li>
  <li>Enter the API Token you generated in Step 2</li>
  <li>Click "Save Configuration"</li>
  <li>Click "Synchronize Now" to start syncing</li>
</ol>

<h4>Security Notes</h4>
<ul>
  <li>Keep your API Token secure and don't share it</li>
  <li>Your R2 bucket should remain private</li>
  <li>Consider using Cloudflare Access for additional security if needed</li>
</ul>

<h4>Troubleshooting</h4>
<ul>
  <li>If sync fails, check that your Worker URL is correct and accessible</li>
  <li>Verify your API Token matches what's configured in the Worker</li>
  <li>Ensure the R2 bucket binding is properly configured in your Worker</li>
  <li>Check the browser developer console for detailed error messages</li>
</ul>
</fieldset>

</body>
</html>
